<script setup>
import {getMaxIndex} from '/src/utils/index.js'
import {ref} from "vue";

defineOptions({
  name: "CreateView"
})

const zIndex = ref(getMaxIndex())

const emit = defineEmits(['afterEnter'])
const props = defineProps({
  bodyStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 更改背景颜色颜色
  backgroundColor: {
    type: String,
    default: '#F5F6F9' // rgba(0, 0, 0, 0.6) 黑色半透明
  },
  /** 展示内容的宽 */
  width: {
    type: String,
    default: '900px'
  },
  /** 展示内容的上下padding */
  padding: {
    type: String,
    default: '40px'
  }
})

function afterEnter() {
  emit('afterEnter')
}
</script>

<template>
  <transition name="opacity-fade" v-on:after-enter="afterEnter">
    <div v-bind:style="{ 'background-color': backgroundColor, 'padding': padding+' 0', 'z-index': zIndex }"
         class="c-view">
      <el-card v-bind:style="{'width': width}" :body-style="bodyStyle"
               class="crm-create-card-container">
        <!-- header 插槽 -->
        <slot name="header"></slot>
        <!-- 默认插槽 -->
        <slot></slot>
      </el-card>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.opacity-fade-enter-active,
.opacity-fade-leave-active {
  transition: all 0.2s;
}

.opacity-fade-enter,
.opacity-fade-leave-to {
  opacity: 0;
}

/** 容器布局 */
.c-view {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.crm-create-card-container {
  margin: 0 auto;
  height: 100%;

  :deep(.el-card__body) {
    padding: 20px 30px;
  }
}
</style>
